<template>
  <div>
    <div class="releaseDynamics_die">
      <div>
        <textarea
          name
          id
          cols="30"
          rows="10"
          :value="value"
          maxlength="200"
          placeholder="请输入动态内容"
          @input="iput"
        ></textarea>
        <div>
          <div>
            <div v-for="(item,index)  in imgArr" :key="index" class="div_one">
              <img :src="item" alt mode="aspectFill" />
              <img
                src="https://www.zhaoshengku.net/7ee9c00a2cbde21440b126524da08c3.jpg"
                alt
                class="img_x"
                @click="dele_img(index)"
              />
            </div>
            <div @click="eacherImg" class="div" v-if="imgArr.length!=9">
              <img
                src="http://www.zhaoshengku.net/wx-%E7%9F%A9%E5%BD%A2%204%20%E6%8B%B7%E8%B4%9D.png  "
                alt
              />
            </div>
          </div>
          <p>最多可写200字</p>
        </div>
        <div></div>
      </div>
    </div>
    <div class="fabu" @click="fabuD">发布</div>
  </div>
</template>

<script>
import qiniuUploader from "../../../static/qiniuUploader";
export default {
  data() {
    return {
      value: "",
      imgArr: [],
      img_x: -1,
      formdata: 1,
      is: true,
      widthheiarr: [],
      lengthtempFilePaths:0
    };
  },
  methods: {
    // 七牛方法
    initQiniu() {
      var options = {
        region: "NCN", // 华北区
        uptokenURL: "https://api.zhaoshengku.net/index/uploader/qtoken", //请求后端uptoken的url地址
        domain: "https://www.zhaoshengku.net" //yourBucketId:这个去你域名配置那里要
        //save_key: true
      };
      qiniuUploader.init(options);
    },
    click() {},
    // 选择图片
    eacherImg() {
      wx.showToast({
        title: "",
        icon: "loading",
        duration: 5000,
        mask: true
      });
      this.$options.methods.initQiniu();
      wx.chooseImage({
        count: 9, //一次最多可以选择的图片张数
        sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          console.log("选择图片", res);
          var filePath = res.tempFilePaths;
          this.lengthtempFilePaths=filePath.length+this.lengthtempFilePaths;
          for (var i = 0; i < filePath.length; i++) {
            wx.getImageInfo({
              src: filePath[i],
              success: res => {
                this.widthheiarr.push({
                  width: res.width,
                  height: res.height
                });
              }
            });
            //  交给七牛上传
            qiniuUploader.upload(
              filePath[i],
              res => {
                console.log(this.widthheiarr);
                wx.showToast({
                  title: "",
                  icon: "loading",
                  duration: 5000,
                  mask: true
                });
                this.imgArr.push(res.data.url);
                this.huoquimgwh();
                wx.hideToast();
                if (this.imgArr.length >= 9) {
                  wx.showToast({
                    title: "最多只能传九张图片哦",
                    icon: "true",
                    duration: 1000,
                    mask: true
                  });
                  this.imgArr.splice(9);
                   this.lengthtempFilePaths=9;
                  this.huoquimgwh();
                  return;
                }
              },
              error => {},
              null, // 可以使用上述参数，或者使用 null 作为参数占位符
              progress => {},
              () => {
                wx.hideLoading();
              }
            );
          }
        },
        fail: function(res) {},
        complete: function(res) {
          wx.hideToast();
        }
      });
    },
    // 获取图片宽高
    huoquimgwh() {},
    // 发布
    fabuD() {
      if(this.imgArr.length!=this.lengthtempFilePaths){
        console.log('我是真的')
        return
      }
      if (!this.is) {
        return;
      }
      if (this.widthheiarr.length > 9) {
        this.widthheiarr = this.widthheiarr.slice(0, 9);
      }
      this.is = false;
      console.log(this.imgArr)
      wx.request({
        url: "https://api.zhaoshengku.net/index/article/addtractate",
        method: "post",
        data: {
          content: this.value,
          images: this.imgArr,
          size: this.widthheiarr
        },
        header: {
          Authorization: this.headerCode
        },
        success: res => {
          console.log(res)
          if (res.data.code == 200) {
            wx.showToast({
              title: "发布成功",
              icon: "true",
              duration: 1000,
              mask: true
            });
            console.log(this.widthheiarr);
            var name;
            if (this.formdata == 0) {
              name = "index";
            } else if (this.formdata == 1) {
              name = "find";
            }
            setTimeout(() => {
              this.is = true;
              wx.reLaunch({
                url: "/pages/" + name + "/main?for=dongtai"
              });
              this.value = "";
              this.imgArr = [];
            }, 1000);
          } else if (res.data.code == 50001) {
            wx.showToast({
              title: "动态内容必须填写！",
              icon: "none",
              duration: 1000,
              mask: true
            });
          } else {
            wx.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 1000,
              mask: true
            });
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    // 长按出现删除按钮
    logdele(e) {
      this.img_x = e;
    },
    // 删除图片
    dele_img(e) {
      this.imgArr.splice(e, 1);
      this.img_x = -1;
      this.widthheiarr.splice(e, 1);
      this.lengthtempFilePaths=this.lengthtempFilePaths-1;
    },
    iput(e) {
      this.value = e.mp.detail.value;
    }
  },
  mounted() {
    this.value = "";
    this.imgArr = [];
    this.lengthtempFilePaths=0;
    wx.setNavigationBarTitle({
      title: "发布动态"
    });
    // 验证token
    wx.getStorage({
      key: "koken",
      success: res => {
        if (res.data) {
          this.headerCode = "Bearer " + res.data;
          //  验证token
          wx.request({
            url: "https://api.zhaoshengku.net/index/login/verifytoken",
            method: "post",
            header: {
              Authorization: this.headerCode
            },
            success: res => {
              if (res.data.code != 200) {
                wx.showToast({
                  title: "未登录",
                  icon: "none",
                  duration: 1000,
                  mask: true
                });
                setTimeout(() => {
                  wx.navigateTo({
                    url: "/pages/loginRegister/main"
                  });
                }, 1000);
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        } else {
          wx.showToast({
            title: "未登录",
            icon: "none",
            duration: 1000,
            mask: true
          });
          setTimeout(() => {
            wx.navigateTo({
              url: "/pages/loginRegister/main"
            });
          }, 1000);
        }
      }
    });
  },
  onLoad(option) {
    this.widthheiarr = [];
    this.formdata = option.from;
    console.log("1");
  },
  onShow() {},
  onHide() {},
  onPullDownRefresh() {
    wx.stopPullDownRefresh();
  }
};
</script>

<style scoped>
.fabu {
  width: 668rpx;
  height: 98rpx;
  text-align: center;
  line-height: 98rpx;
  color: #fff;
  font-size: 35rpx;
  background: url("http://www.zhaoshengku.net/wx-yuanjiao%20.png") center center
    no-repeat;
  background-size: 100% 100%;
  margin: 100rpx auto;
}
.releaseDynamics_die {
  background: #dddddd;
  padding-top: 10rpx;
}
.releaseDynamics_die > div:nth-child(1) {
  padding: 30rpx 35rpx;
  background: #fff;
}
.releaseDynamics_die > div:nth-child(1) > textarea:nth-child(1) {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 40rpx;
  width: 100%;
  height: 360rpx;
}
.releaseDynamics_die > div:nth-child(1) > div:nth-child(2) > div {
  display: flex;
  word-wrap: wrap;
}
.releaseDynamics_die > div:nth-child(1) > div:nth-child(2) > div > .div_one {
  width: 181rpx;
  height: 181rpx;
  position: relative;
}
.releaseDynamics_die > div:nth-child(1) > div:nth-child(2) img {
  width: 181rpx;
  height: 181rpx;

  align-items: center;
}
.releaseDynamics_die > div:nth-child(1) > div:nth-child(2) .img_x {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  position: absolute;
  right: -10rpx;
  top: -10rpx;
}
.releaseDynamics_die
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(1)
  > .div
  img {
  width: 134rpx;
  height: 135rpx;
  margin-bottom: 0;
  margin-right: 0;
}
.releaseDynamics_die
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(1)
  > .div {
  width: 181rpx;
  height: 181rpx;
  border: 2rpx solid rgba(220, 220, 220, 1);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.releaseDynamics_die > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.releaseDynamics_die
  > div:nth-child(1)
  > div:nth-child(2)
  > div:nth-child(1)
  > div {
  margin: 10px 20rpx;
}
.releaseDynamics_die > div:nth-child(1) > div:nth-child(2) {
  margin: 40rpx 0;
  margin-bottom: 0;
  border-bottom: 1px solid #dddddd;
}
.releaseDynamics_die > div:nth-child(1) > div:nth-child(2) > p:nth-child(2) {
  font-size: 11px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  text-align: right;
  margin-top: 50rpx;
  margin-bottom: 10rpx;
}
.releaseDynamics_die > div:nth-child(1) > div:nth-child(3) > img {
  width: 62rpx;
  height: 50rpx;
  margin-left: 35rpx;
}
.releaseDynamics_die > div:nth-child(1) > div:nth-child(3) {
  height: 120rpx;
  display: flex;
  align-items: center;
}
</style>
